<template>
  <div class="questionType">
    <div v-if="questionForm.type === 1">
      <div
        v-for="item in questionForm.select_options"
        :key="item.label"
        class="item"
      >
        <el-radio
          v-model="questionForm.single_select_answer"
          :label="item.label"
          style="margin-right:10px;"
          @change="selectChange"
          >{{ item.label }}</el-radio
        >
        <el-input v-model="item.text"></el-input>
        <!-- 上传头像 -->
        <upload-file
          type="image"
          v-model="item.image"
          style="margin-left:10px;"
        ></upload-file>
      </div>
    </div>
    <div v-else-if="questionForm.type === 2">
      <div
        v-for="item in questionForm.select_options"
        :key="item.label"
        class="item"
      >
        <el-checkbox
          v-model="questionForm.multiple_select_answer"
          :label="item.label"
          style="margin-right:10px;"
          @change="selectChange"
          >{{ item.label }}</el-checkbox
        >
        <el-input v-model="item.text"></el-input>
        <!-- 上传头像 -->
        <upload-file
          type="image"
          v-model="item.image"
          style="margin-left:10px;"
        ></upload-file>
      </div>
    </div>
    <div v-else>
      <el-input
        type="textarea"
        :rows="10"
        v-model="questionForm.short_answer"
        @change="selectChange"
      ></el-input>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import UploadFile from './upload-file.vue'
@Component({
  name: 'QuestionType',
  components: {
    UploadFile
  }
})
export default class QuestionType extends Vue {
  @Prop({ default: null, type: Object }) questionForm: any

  selectChange() {
    this.$emit('questonTypeChange')
  }
}
</script>

<style lang="scss" scoped>
.questionType {
  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
</style>
